<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相同属性的权重问题</title>
    <link rel="stylesheet" href="/static/css/my-demo.css">
    <style>

        .ss {
            color: red;
        }

        #sss {
            color: yellow;
        }

        #sss1 {
            color: yellow;
        }

        #sss2 {
            color: yellow;
        }

        p {
            color: blue;
        }

        .zz {
            color: red !important;
        }

        /*
        说明:
            1. 一个类选择器(权重为10), 一个标签选择器(权重为1), 所以这个样式的总权重为11;
        */
        .weight-calculation p {
            color: red;
        }

        /*
        说明:
            1. 一个类选择器(权重为10);
        */
        .my-p1 {
            color: yellow;
        }

        /*
        说明:
            1. 一个id选择器的权重为100, 所以id设置的生效;
                - 比id更大的权重为行内式(权重1000), 但是一般不推荐直接设置行内式.
        */
        #my-p1 {
            color: blue;
        }

        .my-article {
            color: red;
            font-family: "Microsoft YaHei", "微软雅黑", PingFangSC-Regular, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            font-size: 14px;
            border: solid 1px green;
        }

        .my-div {
            color: yellow;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 权重验证</h1>
    <h2>1.1 权重是什么?</h2>
    <p>最简单的例子就是: 小明写完了作业, 想去玩游戏, 爸爸说去吧, 妈妈说去练书法, 这里就涉及到谁说的话权重大了.</p>
    <h2>1.2 权重验证</h2>
    <div>
        <p id="sss" class="ss">id和class的权重分别为0100和0010, id选择器具有更高权重</p>
        <p class="ss">class和元素选择器的权重分别为0010和0001, class选择器具有更高优先级</p>
        <p>应用了p元素的样式</p>
        <p id="sss1" style="color: #00B83F">行内式样式的权重最高为1000, 会覆盖任意样式</p>
    </div>
    <h2>1.3 强制提升权重</h2>
    <div>
        <p class="zz" id="sss2">使用!important来强制提升权重</p>
    </div>
    <h2>1.4 权重是可以计算的</h2>
    <label>权重值</label>
    <div>
        <table class="my-table">
            <thead>
            <tr>
                <th>规则</th>
                <th>粒度</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ID</td>
                <td>0100</td>
            </tr>
            <tr>
                <td>class，类属性值</td>
                <td>0010</td>
            </tr>
            <tr>
                <td>标签,伪元素</td>
                <td>0001</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0000</td>
            </tr>
            <tr>
                <td>行内样式</td>
                <td>1000</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="weight-calculation">
        <p id="my-p1" class="my-p1">验证样式</p>
    </div>
</div>
<div>
    <h1>二. 样式的继承</h1>
    <h2>2.1 某些样式是可以继承的</h2>
    <article class="my-article">
        <!--
        声明:
            1. 需要注意的是: 继承的样式没有权重值, 任意来一个权重都大于继承的权重.
                - 并不是所有css属性都会被继承, 例如border属性就不会继承.
            2. *通配符的权重是为0, 而继承的权重为null, 在css中`0 > null`.
                - 由于这个特性, 所继承的css样式会覆盖*通配符设置的css.
        -->
        <pre>我继承了父标签的字体带下和字体颜色</pre>
        <div class="my-div">我自己单独声明了自己的样式</div>
    </article>
</div>
</body>
</html>